<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="true" @scroll="scroll" :refresher-enabled="true">
    <template #top>
      <u-navbar
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-3 w-full">
          <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
            <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
          </view>
          <view class="line-clamp-1 flex col-span-1 justify-center">
            <view class="text-[#000] font-bold text-base"> 我的反馈 </view>
          </view>
          <view class="flex col-span-1 justify-end">
            <view class="text-[14px] text-[#5C6068]"> </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <template #empty> <yy-empty text="还没有反馈的信息"></yy-empty> </template>
    <template #loadingMoreNoMore>
      <yy-nomore></yy-nomore>
    </template>
    <view class="flex flex-col gap-4 p-4">
      <view class="bg-[#FFFFFF] rounded-[.75rem] p-4 flex gap-3 flex-col" v-for="(i, k) in dataList" :key="k">
        <view class="text-[.875rem] text-[#161A24]"> {{ i.description }}</view>
        <view class="grid grid-cols-3 gap-3" v-if="i.image">
          <view class="aspect-square rounded-[.5rem]" v-for="(j, k) in i.image.split('|')" :key="k">
            <image
              :src="j"
              @click="previewPictures(i.image.split('|'), k)"
              class="w-full h-full rounded-[.5rem]"
              mode="aspectFill"
            ></image>
          </view>
        </view>
        <view class="border-t"></view>
        <view class="flex justify-between items-center">
          <view class="text-[.8125rem] text-[#8E9299]">{{ i.create_time_text }}</view>
          <!-- <view class="flex gap-1 items-center">
            <view class="text-[.8125rem] text-[#8E9299]">查看详情</view>
            <view> <u-icon name="arrow-right" size="26" color="#606368"></u-icon> </view>
          </view> -->
        </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false // 是否自动加载
      }
    },

    methods: {
      previewPictures(list, k) {
        uni.previewImage({
          urls: list,
          current: list[k]
        })
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        let res = await api.feedbackList({
          page,
          limit
        })
        console.log('🚀 ~ queryList ~ res:', res.data)
        if (!res.code) return
        this.$refs.paging.complete(res.data)
      }
    }
  }
</script>

<style lang="scss" scoped></style>
